<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!--基本表单 -->
        <form>
            <div>
                <label for="user">用户名</label>
                <input type="text" id="user" v-model="user"> {{user}}
            </div>

            <!--基本表单-->
            <div>
                <label for="age">年龄</label>
                <input type="text" id="age" ref="age" :value="age" @input="changeAagfn($event)"> {{age}}
            </div>
            <!--复训框 -->
            <div>
                <lobel for="">全选</lobel>
                <input type="checkbox" v-model="all">{{all}}
            </div>
            <!--复训框 不使用 v-model-->
            <div>
                <label for="">全选</label>
                <input type="checkbox" :checked="quan" @change="changeQuanFn($event)">{{quan}}
            </div>
            <div>
                <input type="text" v-model.trim.number.lazy="s">{{s}}--{{s.length}}--{{typeof s}}
            </div>
        </form>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                user: "gao",
                age: 18,
                all: true,
                quan: true,
                s: ""
            }
        },
        methods: {
            changeAagFn(e) {
                // console.log(111)
                // console.log( document.getElementById("age").value )
                // console.log( this.$refs.age.value )
                console.log(e.target.value)
                this.age = e.target.value

            },
            changeQuanFn(e) {
                console.log(e.target.checked)
                this.quan = e.target.checked
            }
        }
    })
</script>

</html>